<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>

<body>
<div id="app">
    <!--        弹出提示-->

    <el-dialog title="修改信息" :visible.sync="dialogresetVisible">
        <el-form :model="user">
            <el-form-item label="新名称" :label-width="formLabelWidth">
                <el-input v-model="user.username" autocomplete="off"></el-input>
            </el-form-item>

            <el-form-item label="新电话" :label-width="formLabelWidth">
                <el-input v-model="user.tel" autocomplete="off"></el-input>
            </el-form-item>

            <el-form-item label="新的邮件地址" :label-width="formLabelWidth">
                <el-input v-model="user.email" autocomplete="off"></el-input>
            </el-form-item>

        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogresetVisible = false">取 消</el-button>
            <el-button type="primary" @click="update">确 定</el-button>
        </div>
    </el-dialog>



    <el-descriptions class="margin-top" title="个人信息" :column="3" :size="size" border>
        <template slot="extra">
            <el-button type="primary" size="small" @click="dialogresetVisible=true">编辑</el-button>
        </template>
        <el-descriptions-item>
            <template slot="label">
                <i class="el-icon-user"></i>
                用户名
            </template>
            kooriookami
        </el-descriptions-item>
        <el-descriptions-item>
            <template slot="label">
                <i class="el-icon-mobile-phone"></i>
                手机号
            </template>
            18100000000
        </el-descriptions-item>

        <el-descriptions-item>
            <template slot="label">
                <i class="el-icon-mobile-phone"></i>
                邮箱
            </template>
            123213312@qq.com
        </el-descriptions-item>
        <el-descriptions-item>
            <template slot="label">
                <i class="el-icon-location-outline"></i>
                居住地
            </template>
            苏州市
        </el-descriptions-item>
        <el-descriptions-item>
            <template slot="label">
                <i class="el-icon-tickets"></i>
                备注
            </template>
            <el-tag size="small">学校</el-tag>
        </el-descriptions-item>
        <el-descriptions-item>
            <template slot="label">
                <i class="el-icon-office-building"></i>
                联系地址
            </template>
            江苏省苏州市吴中区吴中大道 1188 号
        </el-descriptions-item>
    </el-descriptions>






</div>
</body>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue@2/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            user: {
                id: 0,
                username: 'TEST',
                tel: 'TEST',
                email: 'TEST'
            },
            formLabelWidth: '120px',
            dialogFormVisible: false,
            dialogresetVisible: false,

        },
        created() {
            var that = this
            console.log('Vue 初始化完成 created')
           // this.pushdata()
        },
        methods: {


            open1() {
                this.$message({
                    message: '添加成功!',
                    type: 'success'
                });
            },
            open2() {
                this.$message({
                    message: '添加失败'
                });
            },

            pushdata(){
                var that=this
                axios.get('/users')
                    .then(function (response) {
                        console.log(response.data);
                        that.tableData = response.data.data
                    })
                    .catch(function (error) {
                        console.log(error);
                        this.$message({
                            message: '修改失败'
                        });
                    });

            },

            update(){
                var that = this

                axios.post('/update', {
                    id:that.newtable.id,
                    username: that.newtable.username,
                    tel: that.newtable.tel,
                    email: that.newtable.email
                }).then(function (response) {
                    console.log(response);
                    that.dialogresetVisible = false
                    that.pushdata()
                    this.$message({
                        message: '修改成功!',
                        type: 'success'
                    });

                })
                    .catch(function (error) {
                        console.log(error);



                    });
            },
            add() {

                var that = this

                axios.post('/add', {
                    username: that.user.username,
                    tel: that.user.tel,
                    email: that.user.email
                }).then(function (response) {
                    console.log(response);
                    that.dialogFormVisible = false
                    that.pushdata()
                    that.open1();
                })
                    .catch(function (error) {
                        console.log(error);
                        that.open2();
                    });


            }
        },


    })
</script>

</html>